<template>
  <div class="min-h-screen bg-gray-50 p-4 md:p-6 lg:p-8">
    <div class="max-w-4xl mx-auto">
      <a-card title="图片像素化" class="mb-4">
        <div class="space-y-4">
          <!-- 图片上传 -->
          <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
            <input
              type="file"
              accept="image/*"
              class="hidden"
              ref="fileInput"
              @change="handleImageUpload"
            />
            <div v-if="!imageUrl" @click="triggerFileInput" class="cursor-pointer">
              <upload-outlined class="text-4xl text-gray-400" />
              <p class="mt-2 text-sm text-gray-500">点击或拖拽图片到此处</p>
            </div>
            <img v-else :src="imageUrl" class="max-h-64 mx-auto" />
          </div>

          <!-- 像素化设置 -->
          <div v-if="imageUrl" class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-700">像素大小</label>
              <a-slider
                v-model:value="pixelSize"
                :min="1"
                :max="50"
                @change="handlePixelSizeChange"
              />
            </div>

            <!-- 处理后的图片 -->
            <div v-if="processedImageUrl" class="border rounded-lg p-4">
              <img :src="processedImageUrl" class="max-h-64 mx-auto" />
              <div class="mt-4 flex justify-center space-x-4">
                <a-button type="primary" @click="downloadImage">下载图片</a-button>
                <a-button @click="resetImage">重置</a-button>
              </div>
            </div>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { UploadOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

const fileInput = ref<HTMLInputElement | null>(null)
const imageUrl = ref('')
const processedImageUrl = ref('')
const pixelSize = ref(10)

const triggerFileInput = () => {
  fileInput.value?.click()
}

const handleImageUpload = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (target.files && target.files[0]) {
    const file = target.files[0]
    if (!file.type.startsWith('image/')) {
      message.error('请上传图片文件')
      return
    }

    const reader = new FileReader()
    reader.onload = (e) => {
      if (e.target?.result) {
        imageUrl.value = e.target.result as string
        processImage()
      }
    }
    reader.readAsDataURL(file)
  }
}

const processImage = () => {
  const img = new Image()
  img.onload = () => {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    if (!ctx) return

    // 设置画布大小
    canvas.width = img.width
    canvas.height = img.height

    // 绘制原始图片
    ctx.drawImage(img, 0, 0)

    // 获取图片数据
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
    const data = imageData.data

    // 像素化处理
    const size = pixelSize.value
    for (let y = 0; y < canvas.height; y += size) {
      for (let x = 0; x < canvas.width; x += size) {
        const i = (y * canvas.width + x) * 4
        const r = data[i]
        const g = data[i + 1]
        const b = data[i + 2]
        const a = data[i + 3]

        // 填充像素块
        ctx.fillStyle = `rgba(${r},${g},${b},${a / 255})`
        ctx.fillRect(x, y, size, size)
      }
    }

    processedImageUrl.value = canvas.toDataURL()
  }
  img.src = imageUrl.value
}

const handlePixelSizeChange = () => {
  if (imageUrl.value) {
    processImage()
  }
}

const downloadImage = () => {
  if (processedImageUrl.value) {
    const link = document.createElement('a')
    link.download = 'pixelated-image.png'
    link.href = processedImageUrl.value
    link.click()
  }
}

const resetImage = () => {
  imageUrl.value = ''
  processedImageUrl.value = ''
  pixelSize.value = 10
  if (fileInput.value) {
    fileInput.value.value = ''
  }
}
</script> 